<template>
  <div class="goods-wrap">
    <m_Header />
    <van-cell-group>
      <van-swipe-cell v-for="(item,index) in sortList" :key="index" ref="item" :item="item">
        <template slot="left">
        <van-button square type="info" @click="editSort(item)" text="编辑" />
      </template>
      <van-cell  @click="getDetails(item)" is-link>
        <template slot="title">
          <span class="custom-title">{{ item.title }}</span>
        </template>
        <template slot="right-icon">
          <van-tag v-if="item.status == 'Normal'" type="success">启用中</van-tag>
          <van-tag v-else type="danger">禁用中</van-tag>
          &nbsp;
          <van-icon name="arrow" style="line-height: 24px" />
        </template>
      </van-cell>
      <template slot="right">
        <van-button square type="danger" @click="deleteSort($event)" :data-title="item.title" :data-item="item.id" text="删除" />
      </template>
    </van-swipe-cell>
    </van-cell-group>
    <div class="goods-add fixed">
      <van-button type="info" block @click="addGroupType = true" size="large">添加商品分类</van-button>
    </div>
    <van-popup v-model="addGroupType" style="height: 50%;padding: 2rem 0 0" position="bottom">
      <van-cell-group>
        <van-switch-cell v-model="from.status" title="是否启用" />
        <van-field v-model="from.title" clearable label="标题" placeholder="请输入标题" />
        <van-field v-model="from.sort" clearable label="排序" placeholder="请输入排序" />
        <van-field v-model="from.remark" clearable label="说明" placeholder="请输入说明" />
        <van-cell title=" ">
          <template slot="default">
            <van-button size="small" @click="addGroupInfo()" type="info">确定添加</van-button>
          </template>
        </van-cell>
      </van-cell-group>
    </van-popup>
    <van-popup v-model="show" position="bottom" :style="{ height: '50%' }">
      <van-switch-cell v-model="from.status" title="是否启用" />
        <van-field v-model="from.title" clearable label="标题"  placeholder="请输入标题" />
        <van-field v-model="from.sort" clearable label="排序"  placeholder="请输入排序" />
        <van-field v-model="from.remark" clearable label="说明"  placeholder="请输入说明" />
        <van-cell title=" ">
          <template slot="default">
            <van-button size="small" @click="editGroupInfo" type="info">确定修改</van-button>
          </template>
        </van-cell>
    </van-popup>
  </div>
</template>

<script>
import { Notify } from 'vant';
import { Toast } from 'vant'
import { Dialog } from 'vant';
import m_Header from "@/components/mineStoreHeader.vue";
import m_Footer from "@/components/mineStoreFooter.vue";
export default {
  name: "Goods",
  data() {
    return {
      addGroupType: false,
      show: false,
      editId: null,
      group_name: "",
      from: {
        title: '',
        icon:'success',
        status: true,
        sort: '',
        remark: ''
      },
      sortList:null
    };
  },
  mounted(){
    this.getlist();
  },
  components: {
    m_Header,
    m_Footer
  },
  methods: {
    getlist(){
      this.axios.get('/api/store/manager/category/list/'+this.global.state.storeInfo.id,{
        token: this.global.state.accessToken || sessionStorage.getItem("token")
    }).then(res=>{
      this.sortList=res.data.data;
      }).catch(err=>{
        console.log(err)
      });
    },
    addGroupInfo(){
      let params = {};
      params.title = this.from.title;
      params.icon = this.from.icon;
      params.status = this.from.status ? 'Normal' : false;
      params.remark = this.from.remark;
      params.sort = this.from.sort;
      params.token = this.global.state.accessToken || sessionStorage.getItem("token");
      this.axios.post('/api/store/manager/category/create/'+this.global.state.storeInfo.id,params).then(res => {
			if(res.data.code == 200){
				Notify({ type: 'success',background: '#07c160', message: res.data.message });
				this.addGroupType = false
        this.getlist();
			}else {
				Notify({ type: 'error', message: res.data.message });
			}
			}).catch(error => {
				Notify({ type: 'error', message: error.message });
			});
    },
    deleteSort(e){
      let token = this.global.state.accessToken || sessionStorage.getItem("token");
      Dialog.confirm({
        title: '提示',
        message: `确定要删除${e.target.getAttribute('data-title')}吗?`
      }).then((res) => {
          let id = e.target.getAttribute('data-item');
          this.axios.get('/api/store/manager/category/delete/'+id+'?token='+token).then(res=>{
             if(res.data.code ==200){
                Notify({ type: 'success',background: '#07c160', message: res.data.message});
                this.getlist()
              }else {
                Notify({ type: 'error', message: '修改失败' });
              }
          }).catch(err=>{
            console.log(err)
          })
      }).catch(() => {
        
      });
    },
    editSort(event){
      this.editId = event.id;
      this.show = true;
      let from = {};
      from.title = event.title;
      from.icon = event.icon;
      from.status = event.status == 'Normal' ? true : false  ;
      from.sort = event.sort;
      from.remark = event.remark;
      this.from =  from;
    },
    editGroupInfo(event){
      let params = {};
      params.title = this.from.title;
      params.icon = this.from.icon;
      params.status = this.from.status ? 'Normal' : 'Fail';
      params.remark = this.from.remark;
      params.sort = this.from.sort;
      params.token = this.global.state.accessToken || sessionStorage.getItem("token");
      this.axios.post('/api/store/manager/category/edit/'+this.editId,params).then(res=>{
        if(res.data.code ==200){
          Notify({ type: 'success',background: '#07c160', message: '修改成功',onClose:()=>{this.show = false;this.getlist()} });
        }else {
          Notify({ type: 'error', message: '修改失败' });
        }
      }).catch(err=>console.log(err))
    },
    getDetails(event){
      this.global.state.goodsInfo = event;
      this.global.state.store_path_event = event;
      if(this.global.state.storeInfo.type =='TakeAway'){ //外卖
        this.$router.push({name:'storeMineAllGoods',path:'./allGoods',params:{'info':event}})
      }else {
        this.$router.push({name:'storeMineAllGoods',path:'./allGoods',params:{'info':event}})
      }
      
    }
  }
};
</script>
<style scoped>
.goods-add {
  width: 100%;
  bottom: 0;
}
</style>